<template>
    <section>
        <InfoHeader title="编辑地址"></InfoHeader>
        <div class="info">
            <div class="lianxi">
                <div class="lab">
                <p>联系人</p>
                </div>
                <div class="inp-box">
                    <div class="inp">
                        <input type="text" placeholder="姓名">
                    </div>
                    <div class="btm">
                        <button class="foucking">先生</button>
                        <button>女士</button>
                    </div>
                </div>
            </div>
            <mt-field label="电话" placeholder="手机号码" type="tel" v-model="phone"></mt-field>
            <mt-field label="地址" placeholder="请选择收货地址" type="text" v-model="address"></mt-field>
            <mt-field label="门牌号" placeholder="例： 5号楼303室" type="text" v-model="mengpai"></mt-field>
        </div>
        <div style="width: 100%;display: flex;justify-content: center">
            <mt-button type="primary" style="width: 90%;">保存并使用</mt-button>
        </div>
        <!--        <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field>-->
<!--        <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>-->
<!--        <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>-->
<!--        <mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field>-->
<!--        <mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field>-->
    </section>
</template>

<script>
    import {Badge, Button, Field, Radio} from 'mint-ui';
    import InfoHeader from '../../components/InfoHeader/InfoHeader'
    import Vue from 'vue'
    import {mapState} from 'vuex'
    Vue.component(Field.name, Field);
    Vue.component(Radio.name, Radio);
    Vue.component(Badge.name, Badge);
    Vue.component(Button.name, Button);
    export default {
        name: "ChangeAddress",
        components:{
            InfoHeader
        },
        data() {
            return {
                addressInfo:{},
                name:'',
                phone:'',
                sex:"",
                address:'',
                mengpai:''
            };
        },
        computed: {
            ...mapState(['userAddress'])
        },
        methods: {},
        created() {
            if(this.$route.query.address) {
                this.addressInfo = this.$route.query.address;
            }
        },
        mounted() {
        },
    }
</script>

<style lang="stylus" rel="stylesheet/less">
    @import "../../common/stylus/mixins.styl"
    .info{
        margin-top 15px
    }
   .lianxi{
       height 80px
       bottom-border-1px(rgba(7, 17, 27, 0.1))
       .lab{
           width 20%
           float left
           p{
               margin-top 15px
           }
       }
       .inp-box{
           width 80%
           float left
           .inp{
               bottom-border-1px(rgba(7, 17, 27, 0.1))
               input{
                   width 100%
                   height 40px
               }
           }
           .btm{
               width 100%
               height 40px
               bottom-border-1px(rgba(7, 17, 27, 0.1))
               button {
                   background-color white
                   height 30px
                   margin 5px 5px 10px 0
                   width 80px
                   border 1px solid rgba(7, 17, 27, 0.1)
                   &.foucking{
                       border 1px solid dodgerblue
                   }
               }
           }
       }
   }
</style>
